<template>
  <div class="vuex-input">
    <div class="field is-grouped container" :style="{marginTop: '10px', marginBottom: '10px'}">
      <p class="control is-expanded">
        <input
          class="input"
          type="text"
          placeholder="请输入最新待办事务"
          v-model.trim="VuexInputValue"
          ref="inputRef"
          @keydown.enter="VuexAddItem"
        >
      </p>
      <p class="control">
        <a class="button is-info" @click="VuexAddItem">
          添加
        </a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vuexInput',
  data() {
    return {
      VuexInputValue: ''
    }
  },
  methods: {
    VuexAddItem() {
      if (this.VuexInputValue === '') return
      this.$store.commit('addItemVuex', this.VuexInputValue)
      this.VuexInputValue = ''
      this.$refs.inputRef.focus()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
